<div class="login-page">
    <div class="login-container">
        <div>
            <img src="assets/imgs/site-logo.svg" style="width: 64px; height: 64px;">
            <div *ngIf="context !== 'FORGET'" style="font-weight: 600; font-size: 24px; margin-bottom: 24px;">MT-AUTH
            </div>
        </div>
        <ng-container *ngIf="context !== 'FORGET'">
            <form [formGroup]="form">
                <mat-tab-group (selectedTabChange)="handleTabChange($event)" [selectedIndex]="selectedLoginIndex">
                    <mat-tab (click)="loginContext='MOBILE_CODE'" label="{{'LOGIN_VIA_MOBILE_CODE'|translate}}">
                        <div style="display: flex; flex-direction: column; margin-top: 24px;">
                            <div style="display: flex; flex-direction: row;">
                                <mat-form-field style="margin-right: 8px; width: 100px;">
                                    <mat-label>{{'COUNTRY'|translate}}</mat-label>
                                    <mat-select formControlName="countryCode">
                                        <mat-option *ngFor="let e of mobileNums" [value]="e.value">
                                            {{e.label|translate}}
                                        </mat-option>
                                    </mat-select>
                                </mat-form-field>
                                <mat-form-field>
                                    <mat-label>{{'MOBILE_NUMBER'|translate}}</mat-label>
                                    <input matInput type="text" formControlName="mobileNumber">
                                    <mat-icon matPrefix
                                        style="margin-right: 4px; font-size: 24px; color: rgba(0, 0, 0, 0.54);"
                                        fontSet="material-icons-outlined">smartphone</mat-icon>
                                    <mat-error>{{mobileErrorMsg | translate}}</mat-error>
                                </mat-form-field>
                            </div>
                            <div
                                style="display: flex; flex-direction: row; justify-content: space-between; margin-top: 8px;">
                                <div style="margin-right: 16px; flex: 1;">
                                    <mat-form-field>
                                        <mat-label>{{'ACTIVATION_CODE'| translate}}</mat-label>
                                        <input matInput formControlName="mobileCode">
                                        <mat-icon matPrefix
                                            style="margin-right: 4px; font-size: 24px; color: rgba(0, 0, 0, 0.54);"
                                            fontSet="material-icons-outlined">pin</mat-icon>
                                        <mat-error>{{mobileCodeErrorMsg | translate}}</mat-error>
                                    </mat-form-field>
                                </div>
                                <button style="height: 36px; width: auto; min-width: 102px;" mat-stroked-button
                                    (click)="getCode()" [disabled]="mobileCodeCooldown" color="secondary">
                                    <ng-container *ngIf="mobileCodeCooldown">
                                        <span style="margin-right: 2px;">{{mobileCodeCountDown}}</span><span>S</span>
                                    </ng-container>
                                    <ng-container *ngIf="!mobileCodeCooldown">
                                        {{'GET_CODE'| translate}}
                                    </ng-container>

                                </button>
                            </div>
                        </div>
                    </mat-tab>
                    <mat-tab (click)="loginContext='EMAIL_CODE'" label="{{'LOGIN_VIA_EMAIL'|translate}}">
                        <div style="display: flex; flex-direction: column; margin-top: 16px;">
                            <div style="display: flex; flex-direction: row;">
                                <mat-form-field style="flex: 1;">
                                    <mat-label>{{'ENTER_YOUR_EMAIL' | translate}}</mat-label>
                                    <input matInput formControlName="email" name="email">
                                    <mat-icon matPrefix
                                        style="margin-right: 4px; font-size: 24px; color: rgba(0, 0, 0, 0.54);"
                                        fontSet="material-icons-outlined">mail</mat-icon>
                                    <mat-error>{{emailErrorMsg | translate}}</mat-error>
                                </mat-form-field>
                            </div>
                            <div
                                style="display: flex; flex-direction: row; justify-content: space-between; margin-top: 8px;">
                                <div style="margin-right: 16px; flex: 1;">
                                    <mat-form-field>
                                        <mat-label>{{'ACTIVATION_CODE'| translate}}</mat-label>
                                        <input matInput formControlName="emailCode">
                                        <mat-icon matPrefix
                                            style="margin-right: 4px; font-size: 24px; color: rgba(0, 0, 0, 0.54);"
                                            fontSet="material-icons-outlined">pin</mat-icon>
                                        <mat-error>{{emailCodeErrorMsg | translate}}</mat-error>
                                    </mat-form-field>
                                </div>
                                <button style="height: 36px; width: auto; min-width: 102px;" mat-stroked-button
                                    (click)="getCode()" [disabled]="emailCodeCooldown" color="secondary">
                                    <ng-container *ngIf="emailCodeCooldown">
                                        <span style="margin-right: 2px;">{{emailCodeCountDown}}</span><span>S</span>
                                    </ng-container>
                                    <ng-container *ngIf="!emailCodeCooldown">
                                        {{'GET_CODE'| translate}}
                                    </ng-container>

                                </button>
                            </div>
                        </div>
                    </mat-tab>
                    <mat-tab label="{{'LOGIN_VIA_USERNAME_PASSWORD'|translate}}">
                        <div style="display: flex; flex-direction: column; margin-top: 24px;">
                            <div style="display: flex; flex-direction: row;">
                                <mat-form-field style="margin-right: 8px; width: 100px;">
                                    <mat-label>{{'COUNTRY'|translate}}</mat-label>
                                    <mat-select formControlName="pwdCountryCode">
                                        <mat-option *ngFor="let e of mobileNums" [value]="e.value">
                                            {{e.label|translate}}
                                        </mat-option>
                                    </mat-select>
                                </mat-form-field>
                                <mat-form-field>
                                    <mat-label>{{'MOBILE_NUMBER'|translate}}</mat-label>
                                    <input matInput type="text" formControlName="pwdMobileNumber">
                                    <mat-icon matPrefix
                                        style="margin-right: 4px; font-size: 24px; color: rgba(0, 0, 0, 0.54);"
                                        fontSet="material-icons-outlined">smartphone</mat-icon>
                                    <mat-error>{{usernameErrorMsg | translate}}</mat-error>
                                </mat-form-field>
                            </div>
                            <div
                                style="font-size: 12px; font-weight: 500;color: rgba(0, 0, 0, .54); text-align: center; margin-top: 8px;">
                                ———— {{'LOGIN_OR' | translate}} ————</div>
                            <div style="display: flex; flex-direction: row;">
                                <mat-form-field style="flex: 1;">
                                    <mat-label>{{'ENTER_YOUR_USERNAME' | translate}}</mat-label>
                                    <input matInput formControlName="pwdEmailOrUsername" autocomplete="username"
                                        name="username">
                                    <mat-icon matPrefix
                                        style="margin-right: 4px; font-size: 24px; color: rgba(0, 0, 0, 0.54);"
                                        fontSet="material-icons-outlined">account_circle</mat-icon>
                                    <mat-error>{{usernameErrorMsg | translate}}</mat-error>
                                </mat-form-field>
                            </div>
                            <div style="display: flex; flex-direction: row; margin-top: 8px;">
                                <mat-form-field style="flex: 1;">
                                    <input matInput placeholder="{{ 'ENTER_YOUR_PASSWORD'| translate}}"
                                        [type]="hide ? 'password' : 'text'" formControlName="pwd"
                                        autocomplete="current-password">
                                    <mat-icon matPrefix
                                        style="margin-right: 4px; font-size: 24px; color: rgba(0, 0, 0, 0.54);"
                                        fontSet="material-icons-outlined">lock</mat-icon>
                                    <mat-icon matSuffix style="font-size: 24px; color: rgba(0, 0, 0, 0.54)"
                                        (click)="togglePwd()" fontSet="material-icons-outlined">{{hide ?
                                        'visibility_off' :
                                        'visibility'}}</mat-icon>
                                    <mat-error>{{pwdErrorMsg | translate}}</mat-error>
                                </mat-form-field>
                            </div>
                            <ul style="font-size: 12px; padding-left: 16px;">
                                <li>{{"PASSWORD_RULE_1"|translate}}</li>
                                <li>{{"PASSWORD_RULE_2"|translate}}</li>
                                <li>{{"PASSWORD_RULE_5"|translate}}</li>
                                <li>{{"PASSWORD_RULE_3"|translate}}</li>
                                <li>{{"PASSWORD_RULE_4"|translate}}</li>
                            </ul>
                        </div>
                    </mat-tab>
                </mat-tab-group>

                <button mat-raised-button (click)="loginOrRegister()" style="width: 100%;; margin-top: 24px;"
                    color="primary">{{'LOGIN_OR_REGISTER'|
                    translate}}</button>
                <div *ngIf="loginContext === 'PWD'" style="font-size: 14px; font-weight: 400; margin-top: 12px;">
                    <a (click)="context='FORGET'" class="forget-pwd">{{'FORGET_PASSWORD'| translate}}</a>
                </div>
            </form>
        </ng-container>
        <ng-container *ngIf="context === 'FORGET'">
            <form [formGroup]="forgetForm">
                <div style="font-size: 24px; font-weight: 700;">
                    {{'RESET_PWD'|translate}}
                </div>
                <mat-tab-group (selectedTabChange)="handleForgetTabChange($event)" style="margin-top: 12px;">
                    <mat-tab (click)="forgetContext='MOBILE'" label="{{'RESET_VIA_MOBILE_CODE'|translate}}">
                        <div style="display: flex; flex-direction: column; margin-top: 24px;">
                            <div style="display: flex; flex-direction: row;">
                                <mat-form-field style="margin-right: 8px; width: 100px;">
                                    <mat-label>{{'COUNTRY'|translate}}</mat-label>
                                    <mat-select formControlName="countryCode">
                                        <mat-option *ngFor="let e of mobileNums" [value]="e.value">
                                            {{e.label|translate}}
                                        </mat-option>
                                    </mat-select>
                                </mat-form-field>
                                <mat-form-field>
                                    <mat-label>{{'MOBILE_NUMBER'|translate}}</mat-label>
                                    <input matInput [type]="'text'" formControlName="mobileNumber">
                                    <mat-icon matPrefix
                                        style="margin-right: 4px; font-size: 24px; color: rgba(0, 0, 0, 0.54)"
                                        fontSet="material-icons-outlined">smartphone</mat-icon>
                                    <mat-error>{{forgetMobileErrorMsg | translate}}</mat-error>
                                </mat-form-field>
                            </div>
                        </div>
                    </mat-tab>
                    <mat-tab (click)="forgetContext='EMAIL'" label="{{'RESET_VIA_EMAIL'|translate}}">
                        <div style="display: flex; flex-direction: column; margin-top: 16px;">
                            <div style="display: flex; flex-direction: row;">
                                <mat-form-field style="flex: 1;">
                                    <mat-label>{{'ENTER_YOUR_EMAIL' | translate}}</mat-label>
                                    <input matInput formControlName="email" name="email">
                                    <mat-icon matPrefix
                                        style="margin-right: 4px; font-size: 24px; color: rgba(0, 0, 0, 0.54)"
                                        fontSet="material-icons-outlined">mail</mat-icon>
                                    <mat-error>{{forgetEmailErrorMsg | translate}}</mat-error>
                                </mat-form-field>
                            </div>
                        </div>
                    </mat-tab>
                </mat-tab-group>
                <div style="display: flex; flex-direction: row; justify-content: space-between;">
                    <div style="margin-right: 16px; flex: 1;">
                        <mat-form-field>
                            <mat-label>{{'ACTIVATION_CODE'| translate}}</mat-label>
                            <input matInput formControlName="token">
                            <mat-icon matPrefix style="margin-right: 4px; font-size: 24px; color: rgba(0, 0, 0, 0.54)"
                                fontSet="material-icons-outlined">pin</mat-icon>
                            <mat-error>{{forgetCodeErrorMsg | translate}}</mat-error>
                        </mat-form-field>
                    </div>
                    <button style="height: 36px; width: auto; min-width: 102px;" mat-stroked-button (click)="getToken()"
                        [disabled]="resetCodeCooldown" color="secondary">
                        <ng-container *ngIf="resetCodeCooldown">
                            <span style="margin-right: 2px;">{{resetCodeCountDown}}</span><span>S</span>
                        </ng-container>
                        <ng-container *ngIf="!resetCodeCooldown">
                            {{'GET_CODE'| translate}}
                        </ng-container>

                    </button>
                </div>

                <mat-form-field>
                    <!-- chrome password manager fix, chrome will try to put email into this user invisible field -->
                    <input type="text" style="height: 0; width: 0; position: absolute; left: -1000px; top: -1000px;"
                        autocomplete="username">
                    <input matInput placeholder="{{ 'ENTER_YOUR_NEW_PASSWORD'| translate}}"
                        [type]="hide ? 'password' : 'text'" formControlName="pwd" autocomplete="new-password">

                    <mat-icon matSuffix style="font-size: 24px; color: rgba(0, 0, 0, 0.54)" (click)="togglePwd()"
                        fontSet="material-icons-outlined">{{hide ? 'visibility_off' : 'visibility'}}</mat-icon>
                    <mat-error>{{forgetPwdErrorMsg | translate}}</mat-error>
                </mat-form-field>
                <ul style="font-size: 12px; padding-left: 16px;">
                    <li>{{"PASSWORD_RULE_1"|translate}}</li>
                    <li>{{"PASSWORD_RULE_2"|translate}}</li>
                    <li>{{"PASSWORD_RULE_5"|translate}}</li>
                    <li>{{"PASSWORD_RULE_3"|translate}}</li>
                    <li>{{"PASSWORD_RULE_4"|translate}}</li>
                </ul>
                <button mat-raised-button (click)="changePassword()" style="width: 100%;"
                    color="primary">{{'CHANGE_PASSWORD'|
                    translate}}</button>
                <div style="display: flex;justify-content: space-between;">
                    <a (click)="context='LOGIN'" class="forget-pwd">{{'GO_BACK_TO_LOGIN'| translate}}</a>
                </div>
            </form>
        </ng-container>
        <div style="display: flex; justify-content: center; margin-top: 48px; font-size: 14px;">
            <div (click)="langSvc.toggleLang()"
                style="cursor: pointer; text-align: right;display: flex; flex-direction: row; align-items: center;">
                <mat-icon style="margin-right: 4px; height: 16px; width: 16px; font-size: 16px;">translate</mat-icon>
                <div>{{'CURRENT_LANG' | translate}}</div>
            </div>
        </div>
    </div>
</div>